<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中奖信息</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elementui.js"></script>
    <script src="./js/moment.min.js"></script>
    <link rel="stylesheet" href="./css/review.css">
    <link rel="stylesheet" href="./css/elementui.css">
    <link rel="stylesheet" type="text/css" href="./css/toastr.min.css">
    <script type="text/javascript" src="./js/toastr.min.js"></script>
    <style>
        .export{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
        }
    </style>
</head>
<body>
    <div id="app">
      <div class="export">
        <el-button type="primary" @click="exportExcel">导出</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <!-- <el-table-column
          prop="sender"
          label="用户"
        ></el-table-column> -->
        
        <el-table-column
          prop="prize_name"
          label="奖品"
        ></el-table-column>
        <el-table-column
          prop="nickName"
          label="微信昵称"
        ></el-table-column>
        <el-table-column
          prop="avatarUrl"
          label="微信头像"
        >
          <template slot-scope="scope">
            <div><img style="width: 50px;height: 50px;border-radius: 50%;" :src="scope.row.avatarUrl"/></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
        ></el-table-column>
        <el-table-column
          prop="update_time"
          label="中奖时间"
        >
          <template slot-scope="scope">
            <div>{{moment(scope.row.update_time).subtract(8, 'hours').format('YYYY-MM-DD HH:mm:ss')}}</div>
          </template>
        </el-table-column>
        
      </el-table>
      <div class="paginationWrap">
        <el-pagination
        layout="prev, pager, next"
        background
        :current-page="page"
        @current-change="changePage"
        :total="total">
      </el-pagination>
      </div>
     
    </div>
    
    <script>
        // 创建一个Vue实例
        new Vue({
          el: '#app',
          data: {
            loading:true,
            activeName:'-1',
            total: 0,
            page:1,
            tableData:[]
          },
          mounted(){
            this.getLIst()
          },
          methods:{
            exportExcel(){
              $.ajax({
                url: '/api/price/export', // 文件的URL
                type: 'GET', // 请求类型
                xhrFields: {
                    responseType: 'blob' // 重要：设置响应类型为blob
                },
                success: function(data, textStatus, jqXHR) {
                    // data 是一个Blob对象，包含了文件的数据
                    var blob = data;
                    var url = window.URL.createObjectURL(blob);
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = '中奖信息.xlsx'; // 设置下载文件名
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url); // 释放URL对象
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // 处理错误情况
                    console.error('下载失败:', textStatus, errorThrown);
                }
              });
            },
            changePage(val){
              console.log(val)
              this.page = val;
              this.getLIst()
            },
            getLIst(){
              const _this = this;
              _this.loading = true;
              $.ajax({
                url: '/api/price/list',
                method:'POST',
                contentType:'application/json',
                data:JSON.stringify({
                  'page':this.page,
                  'page_size':10,
                }),
                success:function(res){
                  console.log(res);
                  _this.tableData = res?.data||[]
                  _this.total = res?.total;
                  _this.loading = false;
                },
                error:function(){

                }
              })
             
            }
          },

        });
      </script>
</body>
</html>